<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="80px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="部门名称" prop="name">
                <el-input v-model="temp.name" placeholder="部门名称" />
            </el-form-item>

            <el-form-item label="部门别名" prop="nickName">
                <el-input v-model="temp.nickName" placeholder="部门别名" />
            </el-form-item>

            <el-form-item label="上级部门" prop="parentName">
                <!-- <el-select v-model="temp.parentName" placeholder="请选择">
                    <el-option v-for="item in higherAuthoritiesList" :key="item.deptId" :label="item.name" :value="item.deptId">
                    </el-option>
                </el-select> -->
                <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
                    <el-tree ref="menuListTree" :data="higherAuthoritiesList" :props="higherAuthoritiesProp" node-key="deptId"
                        :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"
                        @current-change="menuListTreeCurrentChangeHandle" />
                </el-popover>
                <el-input v-model="temp.parentName" v-popover:menuListPopover :readonly="true" placeholder="上级部门"
                    class="menu-list__input" />
            </el-form-item>

            <el-form-item label="排序" prop="orderNum">
                <el-input-number v-model="temp.orderNum" width="100%" controls-position="right" :min="0" label="排序" />
            </el-form-item>

            <el-form-item label="部门地址" prop="deptAddress">
                <el-input v-model="temp.deptAddress" placeholder="部门地址" />
            </el-form-item>

            <el-form-item label="备注" prop="deptRemark">
                <el-input v-model="temp.deptRemark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { treeDataTranslate } from '@/utils'
import { getMenuInfo, selectSysDept, createDeptList, updateDeptList } from '@/api/permission'
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        }
    },
    data () {
        var validateUrl = (rule, value, callback) => {
            if (this.temp.type === 1 && !/\S/.test(value)) {
                callback(new Error('菜单URL不能为空'))
            } else {
                callback()
            }
        }
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            temp: {
                name: '',
                nickName: '',
                parentId: '', // 上级部门id
                parentName: '', // 上级部门名称
                orderNum: '', // 排序
                deptAddress: '', // 部门地址
                deptRemark: '' // 部门备注,
            },
            rule: {
                name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
                parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }]
            },
            higherAuthoritiesList: [], // 上级部门数据
            higherAuthoritiesProp: {
                label: 'name',
                children: 'children'
            }
        }
    },
    created () {
        this.getParentMenuList()
    },
    methods: {
        // 初始化
        init (status, param) {
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            const data = Object.assign({}, param)// 从上一页带过来当前的数据
            // let { data, code } = await getMenuInfo(param.menuId) //从后台获取当前的的数据 的 情况
            // 成功
            // 修改赋值 上一页带过来值的时候需要加上 nextTick
            this.$nextTick(() => {
                this.temp.deptId = data.deptId
                this.temp.name = data.name
                this.temp.nickName = data.nickName
                this.temp.orderNum = data.orderNum
                this.temp.deptAddress = data.deptAddress
                this.temp.deptRemark = data.deptRemark
                this.temp.parentId = data.parentId
                // this.temp.parentName = data.parentName
                this.$refs.menuListTree.setCurrentKey(data.parentId) // 设置 所属部门 树形 当前是哪一个
                this.temp.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 后太不会返回 parentName 要根据 parentId 去找
            })
        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                name: '',
                nickName: '',
                parentId: '', // 上级部门id
                parentName: '', // 上级部门名称
                orderNum: '', // 排序
                deptAddress: '', // 部门地址
                deptRemark: '' // 部门备注,
            }
        },
        // 获取所有部门
        async getParentMenuList () {
            const { data } = await selectSysDept()
            this.higherAuthoritiesList = treeDataTranslate(data, 'deptId')
        },
        // 上级部门选中
        menuListTreeCurrentChangeHandle (data) {
            this.temp.parentId = data.deptId
            this.temp.parentName = data.name
        },
        // 图标选中
        iconActiveHandle (iconName) {
            this.temp.icon = iconName
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                const params = {
                    'deptId': this.temp.deptId || undefined,
                    'name': this.temp.name,
                    'nickName': this.temp.nickName,
                    'parentId': this.temp.parentId,
                    'parentName': this.temp.parentName,
                    'orderNum': this.temp.orderNum,
                    'deptAddress': this.temp.deptAddress,
                    'deptRemark': this.temp.deptRemark
                }
                const textMap = {
                    create: createDeptList, // 新增
                    update: updateDeptList // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        }

    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
